<!-- 
    .vue 文件在vue模块化环境中运行时，被叫做单文件组件 
    .vue文件的规则是vue在专用的 模板解析模式 vue-loader 工具构建的特殊定义文件
            该文件可以同时满足vue组件定义时对功能，结构，样式完全支持
    .vue 文件是由三部分组成的
        + <template>  单文件组件对应的页面结构
        + <script>  单文件组件对应的vue功能
            功能区通过 export default 完成vue组件的配置导出，模块环境中单文件组件的vue配置会和当前文件的template自动产生关联
        + <style> 单文件组件对应的样式
-->
<template>
    <div>
        <p class="title">模板:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <input type="button" value="tip" @click="showTip()">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "msg数据"
            }
        },
        methods: {
            showTip() {
                alert(this.msg)
            }
        },
    }
</script>

<style scoped>
.title{
    color: red;
}
</style>